import { h } from 'vue'
import { getGeometricStyle, ergodicList } from '../../../lib/utils'
import Wrap from '../Wrap'
import CustomComponent from './CustomComponent'
import PreviewWrap from './PreviewWrap'

export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    handleComponentMouseDown: {
      type: Function,
      default: () => () => {},
    },
    multipleKeys: {
      type: Array,
      default: () => [],
    },
    selectedComponent: {
      type: Object,
      default: () => {},
    },
  },
  render() {
    // list, isEdit, options
    const { isEdit, list, renderComponentWrapList, renderComponentList } = this
    if (isEdit) {
      return <div>{renderComponentWrapList(list)}</div>
    } else {
      return <div>{renderComponentList(list)}</div>
    }
  },
  methods: {
    /**
     * 渲染动态组件
     * @param {Object} item
     * @param {Function} callback
     * @returns
     */
    renderDynaComponent(item, callback = () => {}) {
      const { tag, props, element, id, class: className } = item
      const { handleValueChange } = this
      const isPreview = !this.isEdit
      props.isPreview = isPreview
      if (tag === 'c-tabs') {
        return (
          <c-tabs
            ref={`component-${item.id}`}
            props={props}
            onValueChange={handleValueChange}
            element={element}
            draggable={false}
            id={id}
            class={className}
            isPreview={isPreview}
          >
            {(props.list || []).map((tab) => {
              return (
                <a-tab-pane key={tab.label} tab={tab.label}>
                  {callback(tab.children)}
                </a-tab-pane>
              )
            })}
          </c-tabs>
        )
      }
      return <CustomComponent ref={`component-${item.id}`} component={item} handleValueChange={handleValueChange} />
    },

    /**
     * 渲染有包装的组件列表
     * @param {*} list
     * @returns
     */
    renderComponentWrapList(list = []) {
      const {
        multipleKeys,
        selectedComponent,
        handleComponentMouseDown,
        renderDynaComponent,
        renderComponentWrapList,
      } = this
      return list.map((item) => {
        let data
        if (multipleKeys.length > 1 || selectedComponent.key !== item.key) {
          data = {
            props: item.props,
            element: item,
            draggable: false,
            id: item.key,
            class: item.class,
            tag: item.tag,
          }
        } else {
          data = {
            props: selectedComponent.props,
            element: selectedComponent,
            draggable: false,
            id: selectedComponent.key,
            class: selectedComponent.class,
            tag: item.tag,
          }
        }

        return (
          <Wrap
            componentClick={(...args) => {
              handleComponentMouseDown(...args)
            }}
            defaultStyle={item.style}
            key={item.key}
            element={item}
            style={getGeometricStyle(selectedComponent.key === item.key ? selectedComponent.style : item.style)}
            isSelected={multipleKeys.includes(item.key)}
          >
            {renderDynaComponent(data, renderComponentWrapList)}
          </Wrap>
        )
      })
    },

    /**
     * 渲染无包装的组件列表
     * @param {*} list
     * @returns
     */
    renderComponentList(list = []) {
      return list.map((item) => {
        const data = {
          props: item.props,
          element: item,
          draggable: false,
          id: item.key,
          class: item.class,
          tag: item.tag,
        }
        return (
          <PreviewWrap defaultStyle={item.style} element={item}>
            {this.renderDynaComponent(data, this.renderComponentList)}
          </PreviewWrap>
        )
      })
    },
    handleValueChange(...args) {
      this.$emit('valueChange', ...args)
    },
    // runAnimation() {
    //   const {
    //     list,
    //   } = this
    //   console.log(list)
    //   ergodicList(list, component => {
    //     if(component.animations.isEnable){
    //       runAnimation(this.$refs[`component-${component.key}`].$el, component.animations.list)
    //     }

    //   })
    // }
  },
  components: {
    Wrap,
    CustomComponent,
  },
  created() {
    window.getData = () => this.$store.state.lowCode
  },
}
